<!--
 * @Author: xuzehan h935351619@163.com
 * @Date: 2024-11-28 15:22:48
 * @LastEditors: xuzehan h935351619@163.com
 * @LastEditTime: 2024-12-04 17:13:02
 * @FilePath: \qlck-vue\src\views\dataManagement\ChannelDataManagement.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div style="display:flex">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper" style="width:30%;padding-top:80px">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="24" :sm="24">
              <a-form-item label="锁定时间">
                <!-- <a-range-picker format="YYYY-MM-DD"  v-model="queryParam.time" style="width:100%"/> -->
                <a-range-picker
                  :show-time="{ format: 'HH:mm:ss' }"
                  format="YYYY-MM-DD HH:mm:ss"
                  v-model="queryParam.time"
                  style="width:100%"
                  :placeholder="['开始时间', '结束时间']"
                />
              </a-form-item>
            </a-col>
            <a-col :md="24" :sm="24" style="margin-bottom:20px">
              <a-form-item label="参数曲线">
                <a-select v-model="queryParam.type">
                  <a-select-option value="eirp">
                    EIRP曲线
                  </a-select-option>
                  <a-select-option value="xzb">
                    信噪比曲线
                  </a-select-option>
                  <a-select-option value="pp">
                    频偏曲线
                  </a-select-option>
                  <a-select-option value="tbzjczs">
                    错码数曲线
                  </a-select-option>
                </a-select>
                <!-- <a-radio-group v-model="queryParam.type" @change="onChange">
                  <a-radio :value="1" style="width:48%;margin-bottom:5px">
                    EIRP曲线
                  </a-radio>
                  <a-radio :value="2" style="width:48%;margin-bottom:5px">
                    信噪比曲线
                  </a-radio>
                  <a-radio :value="3" style="width:48%;margin-bottom:5px">
                    频偏曲线
                  </a-radio>
                  <a-radio :value="4" style="width:48%;margin-bottom:5px">
                    错码数曲线
                  </a-radio>
                </a-radio-group> -->
              </a-form-item>
            </a-col>
            <a-col :md="24" :sm="24">
              <a-form-item label="通  道  号">
                <a-input placeholder="请输入通道号" v-model="queryParam.tdh"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="24" :sm="24">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery">查询</a-button>
                <a-button type="primary" @click="screen('app')" style="margin-left:10px">截图</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="viewBox" id="viewBox">
        <!-- 曲线视图 -->
        <h2>通道参数曲线分析图</h2>
        <div id="main"></div>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import { getAction, httpAction } from '@/api/manage'
import * as echarts from 'echarts'
import moment from 'moment'
export default {
  data() {
    return {
      url: {
        list: '/dcpr/dcprPassagewayHistoryInfo/list'
      },
      queryParam: {},
      xAxisList: [],
      EIRPList: [],
      xzbList: [],
      ppList: [],
      tbzjczsList: [],
      option: {},
      myChart: {},
      seriesName: ''
    }
  },
  mounted() {
    this.init()
    this.getDataList()
  },
  methods: {
    searchQuery() {
      let data = {
        // pageSize:-1,
        tdh: this.queryParam.tdh,
        createTimeStart: moment(this.queryParam.time[0]).format('YYYY-MM-DD HH:mm:ss'),
        createTimeEnd: moment(this.queryParam.time[1]).format('YYYY-MM-DD HH:mm:ss')
      }
      this.getDataList(data)
    },
    onChange() {},
    getDataList(val) {
      let data = val ? val : {}
      // let data=val?val:{pageSize:-1}
      data.pageSize = -1
      getAction(this.url.list, data).then(res => {
        if (res.success) {
          if (!res.result.records.length) {
            this.$message.warning('暂无数据')
            this.option.series[0].name = ''
            this.option.series[0].data = []
            this.option && this.myChart.setOption(this.option)
            return
          }
          let result = res.result.records
          this.xAxisList = []
          this.EIRPList = []
          this.xzbList = []
          this.ppList = []
          this.tbzjczsList = []
          result.forEach(element => {
            this.xAxisList.push(element.createTime)
            this.EIRPList.push(element.eirp)
            this.xzbList.push(element.xzb)
            this.ppList.push(element.pp)
            this.tbzjczsList.push(element.tbzjczs)
          })
           let list = [
            { label: 'EIRP', listName: 'EIRPList', name: 'eirp' },
            { label: '信噪比', listName: 'xzbList', name: 'xzb' },
            { label: '频偏', listName: 'ppList', name: 'pp' },
            { label: '错码数', listName: 'tbzjczsList', name: 'tbzjczs' }
          ]
          let item = list.find(i => i.name == this.queryParam.type)
            ? list.find(i => i.name == this.queryParam.type)
            : list[0]
          this.seriesName = item.label
          //   this.option.series[0].data=[...this[item.listName]]
          //   this.option.series[0].name=item.label
          // this.myChart.setOption(this.option);
          this.myChart.setOption({
            tooltip: {
              trigger: 'axis'
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: this.xAxisList,
              splitLine: {
                show: false
              },
              axisLabel: {          // 字体大小
						    rotate: 45,
						  }
              // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            legend: {
              data: [this.seriesName],
              textStyle: {
                color: '#fff'
              }
            },
            series: [
              {
                name: item.label,
                type: 'line',
                stack: 'Total',
                data: this[item.listName]
              }
            ]
          })
          // this.xAxisList   = records.map(r => r.createTime)
          // this.EIRPList    = records.map(r => r.eirp)
          // this.xzbList     = records.map(r => r.xzb)
          // this.ppList      = records.map(r => r.pp)
          // this.tbzjczsList = records.map(r => r.tbzjczs)
          // const map = {
          //   eirp: { label: 'EIRP', list: this.EIRPList },
          //   xzb: { label: '信噪比', list: this.xzbList },
          //   pp: { label: '频偏', list: this.ppList },
          //   tbzjczs: { label: '错码数', list: this.tbzjczsList },
          // }
          // const target = map[this.queryParam.type] || map.eirp
          // this.seriesName = target.label
          // this.myChart.setOption({
          //   legend: {data: [this.seriesName]},
          //   xAxis: {data: this.xAxisList},
          //   series: [{
          //     name: this.seriesName,
          //     type: 'line',
          //     stack: 'Total',
          //     data: target.list
          //   }],
          //   dataZoom: [
          //     { type: 'inside', xAxisIndex: 0, start: 80, end: 100 },
          //     { type: 'slider', xAxisIndex: 0, start: 80, end: 100, height: 24, bottom: 10 }
          //   ]
          // }, true)
          
          // this.init()
        }
      }).catch(() => {
    this.$message.error('接口异常')
  })
    },
    screen(id) {
      console.log(document.getElementById(id), 'app')
      //对指定容器进行截屏
      html2canvas(document.getElementById(id), {
        useCORS: true, //是否尝试使用CORS从服务器加载图像
        backgroundColor: '#ececec' //画布背景色（如果未在DOM中指定）。设置null为透明
      }).then(canvas => {
        // 返回一个 canvas 对象，在dom中渲染 canvas 对象
        //document.body.appendChild(canvas);
        // 转化成 dataurL
        let canvasImg = canvas.toDataURL('image/png')
        //调用下载方法
        this.downLoadFile('simple', canvasImg)
      })
    },
    downLoadFile(fileName, canvasImg) {
      //创建一个a标签
      var a = document.createElement('a')
      //指定下载文件名称
      a.href = canvasImg
      a.download = fileName
      //模拟点击
      a.click()
    },

    init() {
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      this.myChart = myChart
      this.option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: [this.seriesName],
          textStyle: {
            color: '#fff'
          }
        },
        // toolbox: {
        //   feature: {
        //     dataZoom: {
        //       yAxisIndex: 'none'
        //     },
        //     restore: {},
        //     saveAsImage: {}
        //   }
        // },
        dataZoom: [
          {
            type: 'inside',
            xAxisIndex: 0,
            start: 0,
            end: 20      //默认值显示前20%数据
          },
          {
            type: 'slider',
            xAxisIndex: 0,
            start: 0,
            end: 20,
            height: 24,
            bottom: 10
          }
        ],
        grid: {
          left: '3%',
          right: '4%',
          // bottom: '3%',
          bottom: 60,    //给滚动条留位置
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xAxisList,
          splitLine: {
            show: false
          }
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: this.seriesName,
            // name: 'EIRP',
            type: 'line',
            stack: 'Total',
            data: this.EIRPList
            // data: [120, 132, 101, 134, 90, 230, 210]
          }
          // {
          //   name: '信噪比',
          //   type: 'line',
          //   stack: 'Total',
          //   data: this.xzbList
          //   // data: [220, 182, 191, 234, 290, 330, 310]
          // },
          // {
          //   name: '频偏',
          //   type: 'line',
          //   stack: 'Total',
          //   data: this.ppList
          //   // data: [150, 232, 201, 154, 190, 330, 410]
          // },
          // {
          //   name: '错码数',
          //   type: 'line',
          //   stack: 'Total',
          //   data: this.tbzjczsList
          // },
        ]
      }
      // }
      this.option && this.myChart.setOption(this.option)
    }
  }
}
</script>

<style lang="less" scoped>
.viewBox {
  width: 70%;
  // border:1px solid ;
  height: calc(100vh - 200px);
  padding: 20px;
  // background: url('~@/assets/picture/big-bgi.png') no-repeat center center;
  h2 {
    width: 100%;
    text-align: center;
    padding: 20px;
  }
}
#main {
  width: 800px;
  border: 1px solid;
  height: 550px;
  margin: auto;
}
</style>
